웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
웹페이지의 레이아웃을 구성할 때 DOM 요소의 이동 방법으로 두 가지 방법이 있습니다. 첫 번째는 물리적인 이동 방법이고 두 번째는 논리적인 이동 방법입니다. 아래는 CSS 논리적인 이동 방법의 구현에 대하여 알아봅니다.
먼저 기존의 물리적인 이동 방법과 논리적인 방법의 차이점을 알아야하겠죠. 먼저 각각 사용되는 css 스타일 속성은 아래와 같습니다.
1. 물리적인 이동 스타일 속성
// top, bottom, left, right, margin-left, margin-right, padding-top, padding-right, border-left ...
2. 논리적인 이동 스타일 속성
// inset, inset-inline, margin-inline, margin-block, padding-inline, padding-block ...
추가로 아래와 같이 동일한 속성에 논리적인 값을 사용하는 방법도 있습니다. 아래에서 float는 브라우저 호환성에 따라 지원 여부가 다를 수 있습니다.
위 둘의 css 속성을 보시면 차이점을 아실 수 있습니다. 요약하면 물리적인 방법은 왼쪽, 오른쪽, 위, 아래의 방향에 따라 이동시키는 스타일 속성입니다. 하지만 논리적인 이동은 block과 inline으로 구분하고 start, end로 또 다시 구분됩니다. 즉 왼쪽, 위 등의 방향을 결정하고 이동하는 것이 아니라 블록과 인라인에서 시작과 끝나는 시점을 기준으로 이동할 수 있게 됩니다.
@ 논리적인 이동 스타일 사용의 장점은?
이 두 가지 방법 모두 이동한다는 공통적인 목적으로 사용되는 스타일 속성이지만 차이점이 있습니다. 논리적인 이동 방법은 물리적인 방법과 달리 사용자가 사용하는 언어 방향에 맞춰 페이지에서 요소의 이동할 수 있기 때문입니다. 예를들어 웹페이지는 언어에 따라 LTR, RTL 방향(왼쪽에서 오른쪽이거나 반대로 오른쪽에서 왼쪽으로 콘텐츠가 이동되는 방향)이 다를 수 있습니다. 이 경우 논리적인 스타일 속성은 이에 따라 이동 방향이 결정되기 때문에 언어에 선어에 따라 따로 제어할 필요가 없다는 장점이 있습니다.
만약 다국어 웹사이트를 운영하는 경우라면 이 장점은 더욱 크게 나타납니다. 특정 언어를 위해 이동 스타일 코드를 모두 재작성해 오버라이드해야 하는 경우가 필요할 수도 있지만 미리 논리적인 이동 스타일을 사용했다면 그럴 필요가 없기 때문이죠.
이제 간단한 예제 코드를 만들어보겠습니다. 아래의 예제는 ltr, rtl 사용시 물리적인 방법과 논리적인 방법 사용시 차이점을 보여주기 위함입니다. 먼저 예제 코드를 간략히 작성합니다. 먼저 html로 비교할 두 개의 엘리먼트를 만들고 내부에 box 형태의 요소를 가지게 합니다.
아래는 스타일 속성입니다.
위 코드는 한글에 사용되는 LTR에서는 동일하게 나타나게 됩니다. 위 코드를 구현하면 아래와 같죠.
보시는 것처럼 차이가 없습니다. 하지만 만약 언어가 바뀌고 LTR이 아닌 RTL 환경인 경우라면? 위 예제는 다르게 나타나게 될 것 입니다. 아래는 RTL인 경우입니다.
* direction: rlt (우측에서 좌측 방향)
위 둘의 차이점을 발견하셨나요? 물리적인 이동 스타일을 적용한 위에서는 RTL로 변경되도 변화가 없었습니다. 하지만 이와 달리 논리적인 스타일 속성으로 변경한 margin-inline-start, margin-inline-end 속성을 사용한 경우에는 방향이 RTL로 바뀌었을 때 이동 방향 역시 이에 맞추어 자동으로 변경되는 것을 확인 할 수 있습니다.
예전에는 논리적인 이동 스타일을 사용하려면 각 css 속성과 브라우저 호환성 확인이 필요해 사용하기 어려웠습니다. 하지만 최근 대부분의 브라우저는 논리적인 이동 스타일 속성을 대부분 지원하고 있습니다. 다만 각 속성마다 지원 여부에 있어 조금씩 차이가 있을 수 있기 때문에 반드시 논리적인 이동 스타일을 사용해야 한다는 것은 아니며 프로젝트의 요구 사항이나 사용 언어 등을 고려하여 선택하는 것이 좋을 것 입니다.
# CSS 논리적 이동 스타일 알아보기
Logical properies먼저 기존의 물리적인 이동 방법과 논리적인 방법의 차이점을 알아야하겠죠. 먼저 각각 사용되는 css 스타일 속성은 아래와 같습니다.
1. 물리적인 이동 스타일 속성
// top, bottom, left, right, margin-left, margin-right, padding-top, padding-right, border-left ...
2. 논리적인 이동 스타일 속성
// inset, inset-inline, margin-inline, margin-block, padding-inline, padding-block ...
추가로 아래와 같이 동일한 속성에 논리적인 값을 사용하는 방법도 있습니다. 아래에서 float는 브라우저 호환성에 따라 지원 여부가 다를 수 있습니다.
text-align: start;
text-align: end;
float: inline-start;
float: inline-end;
text-align: end;
float: inline-start;
float: inline-end;
위 둘의 css 속성을 보시면 차이점을 아실 수 있습니다. 요약하면 물리적인 방법은 왼쪽, 오른쪽, 위, 아래의 방향에 따라 이동시키는 스타일 속성입니다. 하지만 논리적인 이동은 block과 inline으로 구분하고 start, end로 또 다시 구분됩니다. 즉 왼쪽, 위 등의 방향을 결정하고 이동하는 것이 아니라 블록과 인라인에서 시작과 끝나는 시점을 기준으로 이동할 수 있게 됩니다.
@ 논리적인 이동 스타일 사용의 장점은?
이 두 가지 방법 모두 이동한다는 공통적인 목적으로 사용되는 스타일 속성이지만 차이점이 있습니다. 논리적인 이동 방법은 물리적인 방법과 달리 사용자가 사용하는 언어 방향에 맞춰 페이지에서 요소의 이동할 수 있기 때문입니다. 예를들어 웹페이지는 언어에 따라 LTR, RTL 방향(왼쪽에서 오른쪽이거나 반대로 오른쪽에서 왼쪽으로 콘텐츠가 이동되는 방향)이 다를 수 있습니다. 이 경우 논리적인 스타일 속성은 이에 따라 이동 방향이 결정되기 때문에 언어에 선어에 따라 따로 제어할 필요가 없다는 장점이 있습니다.
만약 다국어 웹사이트를 운영하는 경우라면 이 장점은 더욱 크게 나타납니다. 특정 언어를 위해 이동 스타일 코드를 모두 재작성해 오버라이드해야 하는 경우가 필요할 수도 있지만 미리 논리적인 이동 스타일을 사용했다면 그럴 필요가 없기 때문이죠.
! Logical css properties 예제보기
이제 간단한 예제 코드를 만들어보겠습니다. 아래의 예제는 ltr, rtl 사용시 물리적인 방법과 논리적인 방법 사용시 차이점을 보여주기 위함입니다. 먼저 예제 코드를 간략히 작성합니다. 먼저 html로 비교할 두 개의 엘리먼트를 만들고 내부에 box 형태의 요소를 가지게 합니다.
<div class="test-physical">
<div class="test-box">Physical box</div>
</div>
<br />
<div class="test-logical">
<div class="test-box">Logical box</div>
</div>
<div class="test-box">Physical box</div>
</div>
<br />
<div class="test-logical">
<div class="test-box">Logical box</div>
</div>
아래는 스타일 속성입니다.
<style>
.test-physical,
.test-logical {
width: 160px;
height: 160px;
background: #eee;
}
.test-box {
width: 100px;
height: 100px;
border: 1px solid;
}
.test-physical .test-box {
margin-left: 20px;
margin-right: 40px;
}
.test-logical .test-box {
margin-inline-start: 20px;
margin-inline-end: 40px;
}
</style>
.test-physical,
.test-logical {
width: 160px;
height: 160px;
background: #eee;
}
.test-box {
width: 100px;
height: 100px;
border: 1px solid;
}
.test-physical .test-box {
margin-left: 20px;
margin-right: 40px;
}
.test-logical .test-box {
margin-inline-start: 20px;
margin-inline-end: 40px;
}
</style>
위 코드는 한글에 사용되는 LTR에서는 동일하게 나타나게 됩니다. 위 코드를 구현하면 아래와 같죠.
<div class="test-physical">
<div class="test-box">Physical box</div>
</div>
<br />
<div class="test-logical">
<div class="test-box">Logical box</div>
</div>
<style>
.test-physical,
.test-logical {
width: 160px;
height: 160px;
background: #eee;
}
.test-box {
width: 100px;
height: 100px;
border: 1px solid;
}
.test-physical .test-box {
margin-left: 20px;
margin-right: 40px;
}
.test-logical .test-box {
margin-inline-start: 20px;
margin-inline-end: 40px;
}
</style>
<div class="test-box">Physical box</div>
</div>
<br />
<div class="test-logical">
<div class="test-box">Logical box</div>
</div>
<style>
.test-physical,
.test-logical {
width: 160px;
height: 160px;
background: #eee;
}
.test-box {
width: 100px;
height: 100px;
border: 1px solid;
}
.test-physical .test-box {
margin-left: 20px;
margin-right: 40px;
}
.test-logical .test-box {
margin-inline-start: 20px;
margin-inline-end: 40px;
}
</style>
보시는 것처럼 차이가 없습니다. 하지만 만약 언어가 바뀌고 LTR이 아닌 RTL 환경인 경우라면? 위 예제는 다르게 나타나게 될 것 입니다. 아래는 RTL인 경우입니다.
* direction: rlt (우측에서 좌측 방향)
동일한 예제를 RTL로 구현하면 아래와 같이 나타납니다.
<div class="test2-physical">
<div class="test2-box">Physical box</div>
</div>
<br />
<div class="test2-logical">
<div class="test2-box">Logical box</div>
</div>
<style>
.test2-physical,
.test2-logical {
width: 160px;
height: 160px;
background: #eee;
direction: rtl;
}
.test2-box {
width: 100px;
height: 100px;
border: 1px solid;
}
.test2-physical .test2-box {
margin-left: 20px;
margin-right: 40px;
}
.test2-logical .test2-box {
margin-inline-start: 20px;
margin-inline-end: 40px;
}
</style>
<div class="test2-physical">
<div class="test2-box">Physical box</div>
</div>
<br />
<div class="test2-logical">
<div class="test2-box">Logical box</div>
</div>
<style>
.test2-physical,
.test2-logical {
width: 160px;
height: 160px;
background: #eee;
direction: rtl;
}
.test2-box {
width: 100px;
height: 100px;
border: 1px solid;
}
.test2-physical .test2-box {
margin-left: 20px;
margin-right: 40px;
}
.test2-logical .test2-box {
margin-inline-start: 20px;
margin-inline-end: 40px;
}
</style>
위 둘의 차이점을 발견하셨나요? 물리적인 이동 스타일을 적용한 위에서는 RTL로 변경되도 변화가 없었습니다. 하지만 이와 달리 논리적인 스타일 속성으로 변경한 margin-inline-start, margin-inline-end 속성을 사용한 경우에는 방향이 RTL로 바뀌었을 때 이동 방향 역시 이에 맞추어 자동으로 변경되는 것을 확인 할 수 있습니다.
! 마치면서
예전에는 논리적인 이동 스타일을 사용하려면 각 css 속성과 브라우저 호환성 확인이 필요해 사용하기 어려웠습니다. 하지만 최근 대부분의 브라우저는 논리적인 이동 스타일 속성을 대부분 지원하고 있습니다. 다만 각 속성마다 지원 여부에 있어 조금씩 차이가 있을 수 있기 때문에 반드시 논리적인 이동 스타일을 사용해야 한다는 것은 아니며 프로젝트의 요구 사항이나 사용 언어 등을 고려하여 선택하는 것이 좋을 것 입니다.
아래의 글도 찾고 계시지 않나요?